<template>
    <div class="container wow animate__animated animate__fadeInLeft" data-wow-duration="2s" data-wow-delay="0.1s">
        <div class="row">
            <div class="col-lg-6 imgArea">
                <img src="./images/developmenthistory.png" alt="developmenthistory">
            </div>
            <div class="col-lg-6 textArea">
                <h3>发展历程</h3>
                <p>研发/生产团队扩增到16人,其中有日本2项个人专利，十数年日本汽车制造/技术经验的管理人员，先后获得29项专利的高级机械设计工程师，取得过8项专利的软件工程师，生物实验行业翘楚（Tecan，Hamilton等）
                </p>
                <router-link class="more" to="/history">了解更多</router-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, nextTick } from "vue";
    import WOW from 'wow.js'// 在vue3中下载的是wow.js|vue2中是wowjs

    onMounted(() => {
        //初始化wow.js(页面滚动加载动画)
        nextTick(() => {   //页面渲染完，在执行
            new WOW().init()
        })
    });
</script>

<style scoped lang="scss">
    .container {
        margin-top: 80px;

        .textArea {
            background-color: #FFF;
            font-family: "Source Han Sans CN";

            h3 {
                font-size: 30px;
                font-weight: 500;
                text-align: center;
                color: #4F68AC;
                margin-bottom: 50px;
            }

            p {
                font-size: 14px;
                color: #666;
                text-align: center;
                line-height: 24px;
            }

            .more {
                height: 40px;
                line-height: 40px;
                width: 140px;
                text-align: center;
                display: block;
                margin: 50px auto 0px;
                border: 1px solid #999;
                background-color: #fff;
                font-size: 14px;
                color: #999;
                transition-duration: 0.3s;

                &:hover {
                    text-decoration: none;
                    background-color: #4F68AC;
                    border: 1px solid #4F68AC;
                    color: #fff;
                }

                &:active {
                    transform: scale(0.95);
                }
            }
        }

        .imgArea {
            padding: 0px;

            img {
                width: 100%;
            }
        }
    }

    /* 设置响应式 */
    /* 移动端 */
    @media (max-width: 768px) {
        .textArea {
            padding: 50px 40px;
        }
    }

    /* PC端 */
    @media (min-width: 768px) {
        .textArea {
            padding: 77.5px 112px;
        }
    }
</style>